<!--
 	* @author  dumeng
-->
<template>
  <div class="grade">
    <el-dialog v-el-drag-dialog :close-on-click-modal="false" :visible.sync="state" title="设置" center :before-close="handleCancel">
      <el-form ref="form" :model="form">
        <el-form-item label="评分状态">
          <el-radio-group v-model="form.evaluateState">
            <el-radio :label="0">不允许评分</el-radio>
            <el-radio :label="1">允许评分</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="点赞状态">
          <el-radio-group v-model="form.favorState">
            <el-radio :label="0">不允许点赞、不允许踩</el-radio>
            <el-radio :label="1">允许点赞、不允许踩</el-radio>
            <el-radio :label="2">允许点赞和踩</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="评论状态">
          <el-radio-group v-model="form.commentState" style="width: 600px;">
            <el-row>
              <el-col :span="12">
                <el-radio :label="0">不允许评论（不展示已有评论）</el-radio>
              </el-col>
              <el-col :span="12">
                <el-radio :label="1">不允许评论（展示已有评论）</el-radio>
              </el-col>
              <el-col :span="12">
                <el-radio :label="2">允许评论（不需要审核）</el-radio>
              </el-col>
              <el-col :span="12">
                <el-radio :label="3">允许评论（需要审核）</el-radio>
              </el-col>
            </el-row>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="handleCancel()">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { set, setEvaluateState, setFavorState, setCommentState } from '../api/index'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
export default {
  name: 'Grade',
  directives: { elDragDialog },
  props: {
    type: {
      type: String,
      default: 'single'
    },
    id: {
      type: String,
      default: ''
    },
    obj: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      form: {
        evaluateState: '',
        favorState: '',
        commentState: ''
      },
      state: true
    }
  },
  created() {
    if (this.type === 'single') {
      for (const i in this.form) {
        this.form[i] = this.obj[i]
      }
    }
  },
  methods: {
    handleComit(key) {
      if (this.form[key] !== '') {
        const loading = this.$loading({
          lock: true,
          text: '请稍后',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.3)'
        })
        if (this.type === 'single') {
          const params = {
            id: this.id
          }
          params[key] = this.form[key]
          return new Promise(resolve => {
            set(params).then(res => {
              loading.close()
              if (res.data.code == '200') {
                resolve()
              }
            })
          })
        } else {
          if (key === 'evaluateState') {
            return new Promise((resolve, reject) => {
              setEvaluateState({ evaluateState: this.form[key] }).then(res => {
                loading.close()
                if (res.data.code == '200') {
                  resolve()
                }
              }).catch(err => {
                reject(err)
                loading.close()
              })
            })
          } else if (key === 'favorState') {
            return new Promise((resolve, reject) => {
              setFavorState({ favorState: this.form[key] }).then(res => {
                loading.close()
                if (res.data.code == '200') {
                  resolve()
                }
              }).catch(err => {
                reject(err)
                loading.close()
              })
            })
          } else if (key === 'commentState') {
            return new Promise((resolve, reject) => {
              setCommentState({ commentState: this.form[key] }).then(res => {
                loading.close()
                if (res.data.code == '200') {
                  resolve()
                }
              }).catch(err => {
                reject(err)
                loading.close()
              })
            })
          }
        }
      }
    },
    handleSubmit() {
      const arr = [this.handleComit('favorState'), this.handleComit('evaluateState'), this.handleComit('commentState')]
      Promise.all(arr).then(resolve => {
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      }).catch(err => {
        console.log(err)
      })
    },
    handleCancel() {
      this.$emit('closeSet')
    }
  }
}
</script>

<style lang="scss">
  .grade{
    .el-select{
      width: 300px;
      margin-right: 20px;
    }
    .el-col{
      margin-bottom: 10px;
    }
    .el-form{
      height:auto !important;
    }
  }
</style>
